<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <th:block th:include="include :: header('首页')"/>
    <th:block th:include="include :: headertable"/>
</head>
<body>
<div class="panel panel-success">
    <!--<div class="panel-heading">
        <h3 class="panel-title">搜索条件</h3>
    </div>-->
    <div class="panel-body" style="padding: 0">
        <form class="layui-form layui-col-space5">
            <!--<div class="layui-inline layui-show-xs-block">-->
                <!--<input type="text" name="name" placeholder="请输入设备名称" autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div class="layui-inline layui-show-xs-block">-->
                <!--<input type="text" name="code" placeholder="请输入设备编码" autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div class="layui-inline layui-show-xs-block">-->
                <!--<input type="text" name="number" placeholder="请输入设备编号" autocomplete="off" class="layui-input">-->
            <!--</div>-->

<!--            <div class="layui-inline layui-show-xs-block">-->
<!--                <select name="code" id="code" lay-filter="code">-->

<!--                </select>-->
<!--            </div>-->
<!--            <div class="layui-inline layui-show-xs-block">-->
<!--                <select name="number" id="number" lay-filter="number">-->

<!--                </select>-->
<!--            </div>-->
<!--            <div class="layui-inline layui-show-xs-block">-->
<!--                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索-->
<!--                </button>-->
<!--                <button class="layui-btn" lay-submit="" lay-filter="reset"><i class="layui-icon">&#xe669;</i>重置</button>-->

<!--            </div>-->
        </form>
    </div>
</div>

<!--删除添加操作-->
<div id="toolbar">
    <button id="addEquipment" class="layui-btn">+ 添加</button>
</div>


<table id="dataTable" lay-filter="dataTable" class="layui-table"></table>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: footertable"/>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var number = "";
        form.on('submit(sreach)', function (data) {
            config.tableQuery("dataTable", data.field)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(reset)', function (data) {
            $("#code").val = ""
        });
        function operateFormatter(value, row, index) {
            var operateHtml = new Array();
            // if (row.name == "氚") {
                operateHtml.push('<button data-method="confirmTrans" class="layui-btn layui-btn-sm" id="showLine1" ><i class="layui-icon">&#xe642;</i>图表</button>');
            // }else if (row.name == "气溶胶") {
            //     operateHtml.push('<button data-method="confirmTrans" class="layui-btn layui-btn-sm" id="showLine2" ><i class="layui-icon">&#xe642;</i>图表</button>');
            // }else if (row.name == "中子") {
            //     operateHtml.push('<button data-method="confirmTrans" class="layui-btn layui-btn-sm" id="showLine3" ><i class="layui-icon">&#xe642;</i>图表</button>');
            // }else if (row.name == "氡") {
            //     operateHtml.push('<button data-method="confirmTrans" class="layui-btn layui-btn-sm" id="showLine4" ><i class="layui-icon">&#xe642;</i>图表</button>');
            // }

            //   operateHtml.push('<button data-method="confirmTrans" class="layui-btn layui-btn-sm" id="ztdy" ><i class="layui-icon">&#xe66a;</i>主题订阅</button>');
            // operateHtml.push('<button class="layui-btn layui-btn-sm layui-btn-danger" id="delete" ><i class="layui-icon">&#xe640;</i>删除</button>');
            return operateHtml.join('');
        }

        var operateEvents = {
            'click #edit': function (e, value, row, index) {
                json = row;
                config.openPageLayer("编辑", "device/addEquipment", ['800px', '600px'], "", false);
            },
            /* 'click #ztdy': function (e, value, row, index) {
                 json = row;
                 config.openPageLayer("主题订阅", "device/dyTheme", ['500px', '400px'], "", false);
             },*/
            // 'click #delete': function (e, value, row, index) {
            //     json = row;
            //     config.openConfirmLayer("确定删除吗？", "/ht/equipmentDel.json", {"id": row.id}, function (data) {
            //         config.tableRefresh();
            //     })
            // },
        };


        var operateEvents = {
            'click #showLine1': function (e, value, row, index) {
                json = row;
                config.openNobtnLayer("展示图表", 'chart/tritiumLine', ['900px', '760px'], "", false);

            }
            // 'click #showLine2': function (e, value, row, index) {
            //     json = row;
            //     config.openNobtnLayer("展示图表", 'chart/aerosolLine', ['900px', '760px'], "", false);
            //
            // },
            // 'click #showLine3': function (e, value, row, index) {
            //     json = row;
            //     config.openNobtnLayer("展示图表", 'chart/neutronLine', ['900px', '760px'], "", false);
            //
            // },
            // 'click #showLine4': function (e, value, row, index) {
            //     json = row;
            //     config.openNobtnLayer("展示图表", 'chart/gammaLine', ['900px', '760px'], "", false);
            //
            // },
            /* 'click #ztdy': function (e, value, row, index) {
                 json = row;
                 config.openPageLayer("主题订阅", "device/dyTheme", ['500px', '400px'], "", false);
             },*/
            // 'click #delete': function (e, value, row, index) {
            //     json = row;
            //     config.openConfirmLayer("确定删除吗？", "/ht/equipmentDel.json", {"id": row.id}, function (data) {
            //         config.tableRefresh();
            //     })
            // },
        };

        config.commGet("/ht/deviceListSimple.json",function (data) {
            var html=' <option value="">请选择设备类型</option>'
            for (var i=0;i<data.length;i++){
                html+=' <option value="'+data[i].code+'">'+data[i].className+'</option>'
            }
            $("#code").html(html);
            console.log(html)
            form.render()
        })

        form.on('select(code)', function(data){
            $("select[name='number']").empty();
            getEquipmentNumber(data.value);
        });
        function getEquipmentNumber(code){
            config.commGet('/ht/equipmentNumber.json?code=' + code, function (list) {
                var number = document.getElementById("number");        //给select定义的id
                var option1 = document.createElement("option");    // 创建添加option属性
                option1.innerText = '请选择设备编号';
                option1.value = ""           // 打印option对应的纯文本 （超级管理员、管理员）
                number.appendChild(option1);
                for (var i = 0; i < list.length; i++) {
                    var option = document.createElement("option");    // 创建添加option属性
                    option.setAttribute("number", list[i].number);                  // 给option的value添加值
                    option.innerText = list[i].number;             // 打印option对应的纯文本 （超级管理员、管理员）
                    number.appendChild(option);                          // 给select 添加option子标签
                }
                form.render("select");
            });
        }

        config.initTable("#dataTable", "/ht/equipmentList.json", [ //表头
                {field: 'id', title: '序号'}
                , {field: 'number', title: '设备编号'}
                , {field: 'handle', title: '标识'}
                , {field: 'createTime', title: '添加时间'}
                , {title: '图表', events: operateEvents, formatter: operateFormatter }
                ]
            , {});

        $(document).on('click', '#addEquipment', function () {
            json = {};
            config.openPageLayer("添加设备", 'device/addEquipment', ['500px', '400px'], "", false);
        })
    })
</script>

</body>
</html>
